<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员等级管理</el-breadcrumb-item>
      </el-breadcrumb>
      <h3>编辑会员等级</h3>
    </el-card>
    <el-card>
      <el-row>
        <el-col :span="14">
           <el-row>
            
            <el-col :span="5">
              <div class="ju-li">等级</div>
            </el-col>
            <el-col :span="10">
              <el-input class="djmc"  v-model="input" placeholder="请输入内容"></el-input>
            </el-col>
          </el-row>
          <el-row>
            
            <el-col :span="5">
              <div class="ju-li">等级名称:</div>
            </el-col>
            <el-col :span="10">
              <el-input class="djmc"  v-model="this.$route.query.id" placeholder="请输入内容"></el-input>
            </el-col>
          </el-row>
          <el-row class="shangxia">
            <el-col class="ju-li" :span="4"> 背景色: </el-col>
            <el-col :span="10">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-col>
          </el-row>
           <el-row >
            
            <el-col :span="5">
              <div class="ju-li">升级礼包:</div>
            </el-col>
            <el-col :span="10">
              <el-input class="djmc"  v-model="input2" placeholder="请输入内容"></el-input>
            </el-col>
          </el-row>
           <el-row>
            
            <el-col :span="5">
              <div class="ju-li">成长值</div>
            </el-col>
            <el-col :span="10">
              <el-input class="djmc"  v-model="input4" placeholder="请输入内容"></el-input>
            </el-col>
          </el-row>
           <el-row>
            
            <el-col :span="5">
              <div class="ju-li">等级权益</div>
            </el-col>
            <el-col :span="10">
              <el-input class="djmc"  v-model="input3" placeholder="请输入内容"></el-input>
            </el-col>
          </el-row>
          <!-- <el-row class="shangxia"> -->
            <!-- <el-col class="ju-li" :span="2">升级条件</el-col>
            <el-col :span="9">
              <el-checkbox class="tj" v-model="checked"
                >注册会员</el-checkbox
              ></el-col
            >
          </el-row>
          <el-row class="shangxia">
            <el-col :span="3" :offset="4">
              <el-checkbox class="tj" v-model="checked"
                >累计消费</el-checkbox
              ></el-col
            > -->
            <!-- <el-col :span="7">
              <el-input
                class="inpu"
                v-model="input1"
                placeholder="请输入内容"
              ></el-input>
            </el-col> -->
            <!-- <el-col :span="3"><el-button size="medium">元</el-button></el-col> -->
          <!-- </el-row> -->
          <!-- <el-row class="shangxia">
            <el-col :span="3" :offset="4">
              <el-checkbox class="tj" v-model="checked"
                >成长值</el-checkbox
              ></el-col
            >
            <el-col :span="7">
              <el-input
                class="inpu"
                v-model="input2"
                placeholder="请输入内容"
              ></el-input>
            </el-col>
          </el-row>
          <el-row class="shangxia1">
            <el-col class="ju-li" :span="3">会员权益</el-col>
            <el-col :span="3">
              <el-checkbox class="tj" v-model="checked"
                >成长加速</el-checkbox
              ></el-col
            >
          </el-row> -->
          <!-- <el-row>
            <el-col :span="3" :offset="4">
              <el-checkbox class="tj" v-model="checked"
                >商品折扣</el-checkbox
              ></el-col
            >
          </el-row> -->
          <!-- <el-row>
            <el-col :span="3" :offset="4">
              <el-checkbox class="tj mcn" v-model="checked"
                >积分翻倍</el-checkbox
              ></el-col
            >
          </el-row> -->
          <el-row>
            <el-col :span="4" :offset="4">
               <el-link type="primary" :underline="false">配置会员权益</el-link></el-col
            >
          </el-row>
          <el-row class="shangxia1">
            <el-col class="ju-li" :span="2">开礼包</el-col>
            <el-col :span="4">
              <el-checkbox class="tj" v-model="checked"
                >送优惠劵</el-checkbox
              ></el-col
            >
            <el-col :span="3">
               <el-link type="primary" :underline="false">选择优惠劵</el-link>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="2" :offset="4">
              <el-checkbox class="tj" v-model="checked">送积分</el-checkbox>
            </el-col>
            <el-col :span="3">
              <el-input
                class="inpu"
                v-model="input3"
                placeholder="请输入内容"
              ></el-input
            ></el-col>
          </el-row> -->
          <el-row class="juli" >
              <el-col  :span="3" :offset="4" > 
                <el-button type="primary" @click="tijiao ()">提交</el-button>
              </el-col>
              <el-col :span="3">
                 <el-button @click="fanhui">返回</el-button>
              </el-col>
            </el-row>
        </el-col>
        <el-col :span="10">
          <div class="bunt">
            <el-row>
              <el-col>会员名称</el-col>
              <el-col>
                <el-row>
                  <el-col> <span class="zhiti-dx">560</span> /1000</el-col>
                  <el-col><el-progress :percentage="5"></el-progress></el-col>
                  <el-col>成长值 距离升级还有500成长值</el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      percentage: "",
      checked: true,
      a: true,
      abc: true,
      abc: true,
      abcd: true,
      abcde: true,
      abcdef: true,
      abcdefg: true,
      input2: "",
      input: "",
      input1:"",
      input3:"",
      input4:"",
      input5:"",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
 methods:{
 fanhui(){  
      this.$router.push("/home/UserLevel");
    },
    tijiao(){
console.log('wphjjhhjhgmj',this.input1);
       this.$axios({
         url:"/vip/userLevel/update",
         method:'post',
         data:{
            // id:this.input1,//等级名称 
           level:this.input,//等级
           packages:this.input2,//升级礼包
           created:this.input3 ,//修改时间
           status:this. input4 , //等级状态
            //  name
         },
       }).then((res)=>{
        //  console.log(res);
          this.$message.success("修改成功");
          this.$router.push("/home/UserLevel");
       })

    }
  }
};  

</script>
 <style lang="less" scoped>
 .juli{
   margin-top: 30px;
 }
.tj {
  margin-top: 10px;
}
.mcn {
  margin-block: 10px;
}
.ti1 {
  margin-left: 300px;
}
.ju-li {
  margin-left: 60px;
  line-height: 45px;
}

.shangxia {
  margin-top: 10px;
}
.djmc {
  width: 300px;
}
.hueyan {
  margin: 10px;
}
.zhiti-dx {
  font-size: 25px;
}
.bunt {
  width: 350px;
  height: 200px;
  background: rgb(9, 201, 25);
  border-radius: 20px;
  margin-left: 100px;
  color: #fff;
  > .el-row > .el-col:first-child {
    margin: 30px 20px;
  }
  > .el-row > .el-col:last-child {
    margin-top: 25px;
    margin-left: 20px;
  }
}
</style>
